<template>
	<view class="page">
		
		<view class="card" v-for="(item,index) in info" :key="index">
			<view class="jian" v-if="index>0" @tap="jian(index)">-</view>
			<view class="title">
				<input type="text" v-model="info[index]['title']" placeholder="请输入维修内容">
			</view>
			<view class="picUpload">
				<view class="picBar">
					<view class="picList">
						<view class="picItem" v-for="(it,idx) in info[index]['picList']" :key="idx">
							<view class="close" @tap="delImg(index,idx)">x</view>
							<image :src="cdnUrl+it" mode="aspectFill" class="pjImg"></image>
						</view>
					</view>
					<view class="picBtn" @tap="selectImg(index)">
						<image src="/static/icon/xiangji.png" class="xjImg"></image>
						<text>上传图片({{info[index]['picLength']}}/6)</text>
					</view>
					
				</view>
			</view>
			<view class="videoUpload">
				<view class="picBar">
					<view class="picList">
						<view class="picItem" v-for="(it,idx) in info[index]['videoList']" :key="idx">
							<view class="close" @tap="delVideo(index,idx)">x</view>
							<video :src="cdnUrl+it" class="pjImg"></video>
						</view>
					</view>
					<view class="picBtn" @tap="selectVideo(index)">
						<image src="/static/icon/xiangji.png" class="xjImg"></image>
						<text>上传视频({{info[index]['videoLength']}}/3)</text>
					</view>
					
				</view>
			</view>
			<view class="text">
				<input type="text" v-model="info[index]['text']" placeholder="请输入维修描述">
			</view>
		</view>
		<view class="action">
		<view class="wq-btn" @tap="addOne">新增一项</view>
		<view class="wq-btn" style="background:#f30; margin-top:20upx;" @tap="save">保存</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api.js'
	import helper from '../../common/helper';
	export default {
		mixins:[helper],
		data() {
			return {
				id:0,
				
				info:[
					{
						title:'主要维修内容',
						picList:[],
						videoList:[],
						picLength:0,
						videoLength:0,
						text:''
					}
				]
			}
		},
		onLoad(e){
			this.id=e.id;
		},
		onBackPress(options) {
					let pages = getCurrentPages() // 上一个页面实例对象   
					let beforePage = pages[pages.length - 2]
					beforePage.$vm.reloadCurrentList(); 
		},
		onUnload(){
			let pages = getCurrentPages() // 上一个页面实例对象
			let beforePage = pages[pages.length - 2]
			beforePage.$vm.reloadCurrentList();
		},
		methods: {
			jian(index){
				this.info.splice(index,1);
			},
			delImg(index,idx){
				this.info[index].picList.splice(idx,1);
				this.info[index].picLength=this.info[index].picList.length;
			},
			delVideo(index,idx){
				this.info[index].videoList.splice(idx,1);
				this.info[index].videoLength=this.info[index].videoList.length;
			},
			save(){
				var flag=true;
				this.info.forEach((item,index)=>{
					if(item.title=="" || item.text==""){
						uni.showToast({
							title:"维修内容和维修描述必填",
							icon:"none"
						})
						flag=false;
					}
				})
				if(flag==true){
					var data={id:this.id,info:JSON.stringify(this.info),status:2};
					api.doRequest('post','valve/xiu',data).then(res=>{
						if(res.statusCode==200 && res.data.code==200){
							uni.showToast({
								title:"操作成功",
								icon:"none"
							})
							var that=this;
							setTimeout(function(){
								uni.navigateBack();
							},500);
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:"none"
							})
						}
						
					})
				}
				
				
			},
			addOne(){
				let info=this.info;
				info.push({title:'',picList:[],text:'',price:'',picLength:0,videoLength:0,videoList:[]});
			},
			selectVideo(index){
				var count=3-this.info[index].videoList.length;
				if(count==0){
					uni.showToast({
						title:"不能上传更多的视频"
					})
				}else{
					var that=this;
					uni.chooseVideo({
						count:1,
						success:(res)=>{
							//console.log(res);
							
							let baseUrl = 'https://up-z2.qiniup.com/';
							// uni.showLoading({
							// 	title: '上传中'
							// })
							var tempFilePath=res.tempFilePath;
							
							
								let key = 'sjfkdgfhjkhjksdjkjhkfdsq' + Date.now();
								let param = {
									file_name: key,
									type: 1
								};
								var token = '';
								api.doRequest('post', 'upload/upload_token', param).then(res => {
									if (res.statusCode == 200) {
										console.log(res.data.data.token);
										token = res.data.data.token;
										uni.showLoading();
										uni.uploadFile({
											url: baseUrl, //仅为示例，非真实的接口地址
											filePath: tempFilePath, //请求图片数组
											name: 'file',
											fileType: "video",
											formData: {
												'key': key,
												'token': token,
											}, //请求参数
											success: (uploadFileRes) => {
												var ret=JSON.parse(
													uploadFileRes.data);
												that.info[index].videoList.push(ret.key);
												that.info[index].videoLength=that.info[index].videoList.length;
												setTimeout(function(){
													uni.hideLoading();
												},2000);
											}
										})
									}
								})
							
							
							
							
						}
					})
				}
				
			},
			selectImg(index){
				var count=6-this.info[index].picList.length;
				if(count==0){
					uni.showToast({
						title:"不能上传更多的图片"
					})
				}
				var that=this;
				uni.chooseImage({
					count:count,
					success:(res)=>{
						//console.log(res);
						
						let baseUrl = 'https://up-z2.qiniup.com/';
						// uni.showLoading({
						// 	title: '上传中'
						// })
						
						res.tempFilePaths.forEach((item, idx) => {
							let key = 'sjfkdgfhjkhjksdjkjhkfdsq' + Date.now();
							let param = {
								file_name: key,
								type: 1
							};
							var token = '';
							api.doRequest('post', 'upload/upload_token', param).then(res => {
								if (res.statusCode == 200) {
									console.log(res.data.data.token);
									token = res.data.data.token;
									uni.uploadFile({
										url: baseUrl, //仅为示例，非真实的接口地址
										filePath: item, //请求图片数组
										name: 'file',
										fileType: "image",
										formData: {
											'key': key,
											'token': token,
										}, //请求参数
										success: (uploadFileRes) => {
											var ret=JSON.parse(
												uploadFileRes.data);
											that.info[index].picList.push(ret.key);
											that.info[index].picLength=that.info[index].picList.length;
										}
									})
								}
							})
						});
						
						
						
					}
				})
			},
		}
	}
</script>

<style scoped>
	.page{}
	.card{width:670upx;padding:20upx;margin:20upx auto;background:#fff;border-radius:20upx;border:1upx solid #ccc;position:relative; }
	.jian{position:absolute;right:-10upx;top:-10upx;width:40upx;height:40upx;background:#f00;display: flex;align-items: center;justify-content: center;color:#fff;border-radius:20upx;box-shadow: 0 0 10upx #ccc;font-weight: bold;font-size:16px;}
.picBar{display: flex;align-items: center;margin:20upx 0;}
	.picList{display: flex;align-items: center;}
	.picBtn text{color:#999;font-size:0.8em;text-align: center;width:100%;display: block;}
	.picItem{width:200upx; height:200upx; margin-right:20upx;border:1upx dashed #eee; position: relative}
	.picItem .close{width:30upx; height:30upx;position:absolute;z-index:2;right:-10upx;top:-10upx;background:rgba(0,0,0,0.8);color:#fff;text-align: center;line-height: 30upx;font-size:0.7em;border-radius:10upx;}
	.picItem .pjImg{width:200upx; height:200upx;}
	.xjImg{width:150upx; height:150upx;display: block;margin:0 auto;}
	input{width:670upx;border:1px solid #ccc;height:80upx;border-radius:10upx;text-indent:1em;}
	.action{width:710upx; padding:20upx;margin:0 auto;}
</style>
